feat: new course outline header [FC-0114] by navinkarkera · Pull Request #2735 · openedx/frontend-app-authoring

navinkarkera · 2025-12-05T15:53:15Z

Description

Adds new header and subheader to course outline. Converts existing js code to ts.

Useful information to include:

Which user roles will this change impact? "Course Author"

Screenshots:

Supporting information

Course Outline: Header Update #2622
Depends on: chore: add end date to course outline api [FC-0114] openedx-platform#37727
Private-ref: https://tasks.opencraft.com/browse/FAL-4290

Testing instructions

The new design depends on ENABLE_COURSE_OUTLINE_NEW_DESIGN flag in env files. Make sure it is set to true.
Checkout chore: add end date to course outline api [FC-0114] openedx-platform#37727 in edx-platform
Open any course and set its start date and end date, if the current date is between these dates, the Active badge is displayed in the header.
If the current date is before start date, Upcoming badge is displayed
If the current date is after end date, Archived badge is displayed
To see notifications icon in the header, install https://github.com/openedx/tutor-contrib-notifications in tutor and enable it.
Run tutor dev launch -I --skip-build to initialize the plugin and allow it to create flags etc.
Create a new file env.config.jsx file in authoring root folder.
Paste below code snippet inside it.

function addPlugins(config, slot_name, plugins) {
  if (slot_name in config.pluginSlots === false) {
    config.pluginSlots[slot_name] = {
      keepDefault: true,
      plugins: []
    };
  }

  config.pluginSlots[slot_name].plugins.push(...plugins);
}

async function setConfig () {
  let config = {
    pluginSlots: {}
  };

  try {
    /* We can't assume FPF exists, as it's not declared as a dependency in all
     * MFEs, so we import it dynamically. In addition, for dynamic imports to
     * work with Webpack all of the code that actually uses the imported module
     * needs to be inside the `try{}` block.
     */
    const { DIRECT_PLUGIN, PLUGIN_OPERATIONS } = await import('@openedx/frontend-plugin-framework');
    const { NotificationsTray } = await import('@edx/frontend-plugin-notifications');
    addPlugins(config, 'org.openedx.frontend.layout.header_desktop_secondary_menu.v1', [
    {
      op: PLUGIN_OPERATIONS.Insert,
      widget: {
        id: 'notification-drawer-widget',
        priority: 10,
        type: DIRECT_PLUGIN,
        RenderWidget: NotificationsTray,
      },
    }
]);
    addPlugins(config, 'org.openedx.frontend.layout.header_learning_help.v1', [
    {
      op: PLUGIN_OPERATIONS.Insert,
      widget: {
        id: 'notification-drawer-widget',
        priority: 10,
        type: DIRECT_PLUGIN,
        RenderWidget: NotificationsTray,
      },
    }
]);
    addPlugins(config, 'org.openedx.frontend.layout.studio_header_search_button_slot.v1', [
    {
      op: PLUGIN_OPERATIONS.Insert,
      widget: {
        id: 'notification-drawer-widget',
        priority: 10,
        type: DIRECT_PLUGIN,
        RenderWidget: NotificationsTray,
      },
    }
]);
    if (process.env.APP_ID == 'admin-console') {
    }
    if (process.env.APP_ID == 'authn') {
    }
    if (process.env.APP_ID == 'authoring') {
    }
    if (process.env.APP_ID == 'account') {
    }
    if (process.env.APP_ID == 'communications') {
    }
    if (process.env.APP_ID == 'discussions') {
    }
    if (process.env.APP_ID == 'gradebook') {
    }
    if (process.env.APP_ID == 'learner-dashboard') {
    }
    if (process.env.APP_ID == 'learning') {
    }
    if (process.env.APP_ID == 'ora-grading') {
    }
    if (process.env.APP_ID == 'profile') {
    }
  } catch (err) { console.error("env.config.jsx failed to apply: ", err);}

  return config;
}

export default setConfig;

Run npm install @edx/frontend-plugin-notifications@^2.0.3 in authoring folder
Restart authoring service using tutor dev restart authoring.
Add some course updates using Content -> Course updates page to create some notifications.
The number notifications should be visible in course outline subheader as well as the navigation bar.

Other information

Make sure to update tutor to latest version.

Best Practices Checklist

We're trying to move away from some deprecated patterns in this codebase. Please
check if your PR meets these recommendations before asking for a review:

Any new files are using TypeScript (.ts, .tsx).
Avoid propTypes and defaultProps in any new or modified code.
Tests should use the helpers in src/testUtils.tsx (specifically initializeMocks)
Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
Use React Query to load data from REST APIs. See any apiHooks.ts in this repo for examples.
All new i18n messages in messages.ts files have a description for translators to use.
Avoid using ../ in import paths. To import from parent folders, use @src, e.g. import { initializeMocks } from '@src/testUtils'; instead of from '../../../../testUtils'

openedx-webhooks · 2025-12-05T15:53:21Z

Thanks for the pull request, @navinkarkera!

This repository is currently maintained by @bradenmacdonald.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

codecov · 2025-12-12T06:32:10Z

Codecov Report

❌ Patch coverage is 99.17355% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 94.91%. Comparing base (41a326f) to head (ed0e2e9).
⚠️ Report is 2 commits behind head on master.

Files with missing lines	Patch %	Lines
src/course-outline/status-bar/StatusBar.tsx	97.61%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2735      +/-   ##
==========================================
+ Coverage   94.90%   94.91%   +0.01%     
==========================================
  Files        1235     1238       +3     
  Lines       28280    28398     +118     
  Branches     6415     6475      +60     
==========================================
+ Hits        26838    26955     +117     
- Misses       1371     1372       +1     
  Partials       71       71

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

navinkarkera · 2025-12-16T06:53:57Z

+    async function load() {
+      try {
+        // @ts-ignore
+        // eslint-disable-next-line import/no-extraneous-dependencies, import/no-unresolved
+        const module = await import('@edx/frontend-plugin-notifications');
+        const hookFn = module.useAppNotifications ?? module.default;
+        if (!cancelled) {
+          // `module.useAppNotifications` is itself a hook
+          setHook(() => hookFn);
+        }
+      } catch (err: any) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to load notifications plugin:', err);
+      }
+    }


@edx/frontend-plugin-notifications being installed as a plugin forces us to dynamically import it and stub it in webpack in case it is not installed.

Is this the first time we have had this pattern?

Maybe we should have a more generic version of the useDynamicHookShim in generic if we need that every time we use a hook from a plugin.

I think this is the first time, we could create a generic one if required but I don't think it is worth it right now. I am not even sure if this is the best way 😅

It could be much better to create the notification icon component in @edx/frontend-plugin-notifications repo and create a plugin slot here and include it same as the notification tray.

rpenido

Awesome work here @navinkarkera!

I tried checking the notification status bar, but it didn't appear. This is what I have on the /api/notifications/count response:

{"show_notifications_tray":false,"count":0,"count_by_app_name":{"discussion":0,"updates":0,"grading":0},"notification_expiry_days":60}

Do I need any additional setup to make it work (besides installing the plugin and running the migrations)?

I'm having this error, but I'm not sure if it is related:

cms-1          | edx_event_bus_redis.internal.producer.EventProductionException: Error -2 connecting to edx.devstack.redis:6379. Name or service not known.

rpenido · 2025-12-16T21:06:17Z

+/* istanbul ignore file */
+import React from 'react';
+
+export interface HooKType {


typo

Suggested change

export interface HooKType {

export interface HookType {

rpenido · 2025-12-16T21:06:35Z

+
+// Load the hook module asynchronously
+export function useDynamicHookShim() {
+  const [hook, setHook] = React.useState<(() => HooKType) | null>(null);


typo

Suggested change

const [hook, setHook] = React.useState<(() => HooKType) | null>(null);

const [hook, setHook] = React.useState<(() => HookType) | null>(null);

rpenido · 2025-12-16T21:11:02Z

+
+    async function load() {
+      try {
+        // @ts-ignore


I'm not getting typescript errors from this

Suggested change

// @ts-ignore

If @edx/frontend-plugin-notifications is not installed, typescript complains.

rpenido · 2025-12-16T21:16:10Z

 import messages from './messages';
 import initializeStore from '../../store';


Nit

Suggested change

import messages from './messages';

import initializeStore from '../../store';

import initializeStore from '@src/store';

import messages from './messages';

There are also some paths in this file from mock that can be updated:
i.e

jest.mock('../../generic/data/api', () => ({

to

jest.mock('@src/generic/data/api', () => ({

rpenido · 2025-12-16T21:20:16Z

+    async function load() {
+      try {
+        // @ts-ignore
+        // eslint-disable-next-line import/no-extraneous-dependencies, import/no-unresolved
+        const module = await import('@edx/frontend-plugin-notifications');
+        const hookFn = module.useAppNotifications ?? module.default;
+        if (!cancelled) {
+          // `module.useAppNotifications` is itself a hook
+          setHook(() => hookFn);
+        }
+      } catch (err: any) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to load notifications plugin:', err);
+      }
+    }


Is this the first time we have had this pattern?

Maybe we should have a more generic version of the useDynamicHookShim in generic if we need that every time we use a hook from a plugin.

rpenido · 2025-12-16T21:45:52Z

      "paths": {
-        "@src/*": ["./*"]
+        "@src/*": ["./*"],
+	"CourseAuthoring/*": ["./*"]


Do you mind sharing the reason for this new alias? Are they used inside the plugins?

It is used in a lot of places, specially in plugin-slot files like src/plugin-slots/CourseUnitHeaderActionsSlot/index.jsx. Also mentioned in https://github.com/open-craft/frontend-app-authoring/blob/bb120b9c739ab042bd9b5e4ae605c27209561719/jest.config.js#L16

This CourseAuthoring/ alias is meant [only] for use in plugins, yep.

navinkarkera · 2025-12-17T05:44:01Z

Run tutor dev launch -I --skip-build to initialize the plugin and allow it to create flags etc.

@rpenido I added this line to the instructions, let me know if it still doesn't work.

… to tsx

…tline

rpenido

LGTM 👍
Thank you for your work, @navinkarkera!

I tested this using the instructions from the PR
I read through the code
I checked for accessibility issues
Includes documentation

ChrisChV

The code looks good, thanks! 👍

openedx-webhooks added open-source-contribution PR author is not from Axim or 2U core contributor PR author is a Core Contributor (who may or may not have write access to this repo). labels Dec 5, 2025

openedx-webhooks added this to Contributions Dec 5, 2025

github-project-automation Bot moved this to Needs Triage in Contributions Dec 5, 2025

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Dec 11, 2025

navinkarkera force-pushed the navin/fal-4290/outline-header branch 2 times, most recently from 7a8db8f to 780ae32 Compare December 12, 2025 06:21

navinkarkera mentioned this pull request Dec 15, 2025

chore: add end date to course outline api [FC-0114] openedx/openedx-platform#37727

Merged

navinkarkera force-pushed the navin/fal-4290/outline-header branch 2 times, most recently from 7e4e3e3 to bb120b9 Compare December 16, 2025 06:49

navinkarkera marked this pull request as ready for review December 16, 2025 06:51

navinkarkera commented Dec 16, 2025

View reviewed changes

rpenido reviewed Dec 16, 2025

View reviewed changes

navinkarkera added 14 commits December 17, 2025 11:29

refactor: convert subheader component to tsx

6f9c5b3

refactor: convert course outline header plugin slot and related files…

9d435bb

… to tsx

feat: new header action buttons

8fa0d08

feat: status bar

dd93d01

feat: new status bar in course outline

613a1b7

fixup! feat: new status bar in course outline

4168552

feat: expand collapse button bar

b302d33

refactor: status bar

ee811e4

test: fix course outline test

9a3ac53

fix: subheader typing

387b224

test: status bar

dc1d762

refactor: internationalize status bar badge texts

653c6cc

test: header actions

2487296

chore: fix lint issues

a78653f

navinkarkera added 8 commits December 17, 2025 11:29

test: add tests

d55150c

feat: notification count from notification plugin in course outline

6064fd5

fixup! feat: notification count from notification plugin in course ou…

2d08325

…tline

chore: use @src for imports

bef98a0

chore: eslint issue

03869ab

chore: ts issue

c60dc87

test: notification badge

33e562d

chore: update imports and fix typos

ed0e2e9

navinkarkera force-pushed the navin/fal-4290/outline-header branch from bb120b9 to ed0e2e9 Compare December 17, 2025 05:59

rpenido approved these changes Dec 17, 2025

View reviewed changes

ChrisChV approved these changes Dec 17, 2025

View reviewed changes

ChrisChV changed the title ~~feat: new course outline header~~ feat: new course outline header [FC-0114] Dec 17, 2025

ChrisChV merged commit ae67be8 into openedx:master Dec 17, 2025
7 checks passed

github-project-automation Bot moved this from Waiting on Author to Done in Contributions Dec 17, 2025

	const [hook, setHook] = React.useState<(() => HooKType) \| null>(null);
	const [hook, setHook] = React.useState<(() => HookType) \| null>(null);

		import messages from './messages';
		import initializeStore from '../../store';

Conversation

navinkarkera commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Supporting information

Testing instructions

Other information

Best Practices Checklist

Uh oh!

openedx-webhooks commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rpenido left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

navinkarkera commented Dec 17, 2025

Uh oh!

rpenido left a comment

Choose a reason for hiding this comment

Uh oh!

ChrisChV left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

navinkarkera commented Dec 5, 2025 •

edited

Loading

openedx-webhooks commented Dec 5, 2025 •

edited

Loading

codecov Bot commented Dec 12, 2025 •

edited

Loading